<template>
  <view class="app-container">
    <!-- 顶部标题 -->
    <view class="header">
      <wd-button block type="primary" size="large" @click="showAddForm">
        新增预约
      </wd-button>
    </view>
    
    <!-- 搜索区域 -->
    <view class="search-section">
      <wd-search
        v-model="searchText"
        placeholder="请输入服务名称"
        shape="round"
        @search="handleSearch"
        @clear="handleSearch"
      />
    </view>
    
    <!-- 状态筛选 -->
    <view class="filter-section">
      <wd-tabs v-model="activeFilter" @change="filterAppointments">
        <wd-tab v-for="tab in filterTabs" :key="tab.value" :name="tab.value" :title="tab.label" />
      </wd-tabs>
    </view>
    
    <!-- 预约列表 -->
    <view class="appointment-list">
      <view 
        v-for="item in filteredAppointments" 
        :key="item.id" 
        class="appointment-item"
      >
        <!-- 第一行：左侧图片 + 右侧信息 -->
        <view class="item-row">
          <view class="image-container">
            <image class="service-image" :src="item.image" mode="aspectFill" />
          </view>
          
          <view class="info-container">
            <view class="info-row">
              <text class="service-name">{{ item.serviceName }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">地点：</text>
              <text class="info-value">{{ item.address }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">预约人：</text>
              <text class="info-value">{{ item.person }} ({{ item.phone }})</text>
            </view>
          </view>
        </view>
        
        <!-- 第二行：状态和操作按钮 -->
        <view class="action-row">
          <view class="status-badge" :style="{ background: getStatusColor(item.status, 0.1), color: getStatusColor(item.status) }">
            {{ getStatusText(item.status) }}
          </view>
          
          <view class="action-buttons">
            <wd-button 
              size="small" 
              type="primary" 
              plain 
              @click="showDetail(item)"
            >详情</wd-button>
            <wd-button 
              size="small" 
              type="default" 
              plain 
              @click="showEdit(item)"
              v-if="item.status === 'pending'"
            >修改</wd-button>
            <wd-button 
              size="small" 
              type="danger" 
              plain 
              @click="showDelete(item)"
              v-if="item.status === 'pending'"
            >删除</wd-button>
          </view>
        </view>
      </view>
      
      <!-- <wd-empty v-if="filteredAppointments.length === 0" description="暂无预约数据" /> -->
    </view>
    
    <!-- 详情弹窗 -->
    <wd-action-sheet
      v-model="detailVisible"
      title="预约详情"
      custom-class="detail-sheet"
    >
      <view class="detail-content">
        <view class="detail-item">
          <text class="detail-label">预约编号：</text>
          <text class="detail-value">{{ currentItem.id }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">服务名称：</text>
          <text class="detail-value">{{ currentItem.serviceName }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">服务机构：</text>
          <text class="detail-value">{{ currentItem.institution }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">预约时间：</text>
          <text class="detail-value">{{ formatDateTime(currentItem.appointmentTime) }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">服务地点：</text>
          <text class="detail-value">{{ currentItem.address }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">预约人：</text>
          <text class="detail-value">{{ currentItem.person }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">联系电话：</text>
          <text class="detail-value">{{ currentItem.phone }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">预约状态：</text>
          <text class="detail-value" :style="{ color: getStatusColor(currentItem.status) }">
            {{ getStatusText(currentItem.status) }}
          </text>
        </view>
      </view>
      
      <!-- 底部按钮 -->
      <view class="popup-footer">
        <wd-button 
          type="default" 
          block 
          @click="detailVisible = false"
        >关闭</wd-button>
      </view>
    </wd-action-sheet>
    
    <!-- 编辑弹窗 -->
    <wd-action-sheet
      v-model="editVisible"
      title="修改预约信息"
      custom-class="form-sheet"
    >
      <view class="form-container">
        <wd-form ref="editFormRef" :model="editForm">
          <wd-cell-group border>
              <wd-input 
			   label="服务名称"
                v-model="editForm.serviceName" 
                placeholder="请输入服务名称"
				         label-width="100px"
                :rules="[{ required: true, message: '服务名称不能为空' }]"
                custom-class="form-input"
              />
            
              <wd-input 
			     label="服务机构"
                v-model="editForm.institution" 
                placeholder="请输入服务机构"
				   label-width="100px"
                :rules="[{ required: true, message: '服务机构不能为空' }]"
                custom-class="form-input"
              />
            
              <wd-datetime-picker
			     label-width="100px"
				 		     label="预约时间"
                v-model="editForm.appointmentTime"
                type="datetime"
                placeholder="请选择时间"
                :rules="[{ required: true, message: '请选择预约时间' }]"
                custom-class="form-picker"
              />
            
              <wd-input 
			    label="服务地点"
			     label-width="100px"
                v-model="editForm.address" 
                placeholder="请输入地点"
                :rules="[{ required: true, message: '服务地点不能为空' }]"
                custom-class="form-input"
              />
            
              <wd-input 
			   label="预约人"
			     label-width="100px"
                v-model="editForm.person" 
                placeholder="请输入预约人姓名"
                :rules="[{ required: true, message: '预约人不能为空' }]"
                custom-class="form-input"
              />
          
            
              <wd-input 
			     label="联系电话"
				
                v-model="editForm.phone" 
				   label-width="100px"
                placeholder="请输入联系电话"
                :rules="[
                  { required: true, message: '联系电话不能为空' },
                  { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
                ]"
                custom-class="form-input"
              />
            
				<!-- <view class="radio-view">
					<view style="width: 100px;" class="radio-view-label">预约状态</view>
				    <view class="radio-view-items">
						<wd-radio-group
										 v-model="editForm.status" custom-class="radio-container">
						     <wd-radio value="pending" custom-class="radio-item">待确认</wd-radio>
						     <wd-radio value="confirmed" custom-class="radio-item">已确认</wd-radio>
						   </wd-radio-group>
					</view>
				</view> -->
          </wd-cell-group>
        </wd-form>
      </view>
      
      <!-- 底部按钮 -->
      <view class="popup-footer">
        <wd-button 
          type="default" 
          custom-class="footer-btn"
          @click="editVisible = false"
        >取消</wd-button>
        <wd-button 
          type="primary" 
          custom-class="footer-btn"
          @click="handleEditConfirm"
        >保存修改</wd-button>
      </view>
    </wd-action-sheet>
    
    <!-- 新增弹窗 -->
    <wd-action-sheet
      v-model="addVisible"
      title="新增预约"
      custom-class="form-sheet"
    >
      <view class="form-container">
        <wd-form ref="addFormRef" :model="addForm">
          <wd-cell-group border>
              <wd-input 
			        label="服务名称"

                v-model="addForm.serviceName" 
                placeholder="请输入服务名称"
                :rules="[{ required: true, message: '服务名称不能为空' }]"
                custom-class="form-input"
				label-width="100px"
              />
            
              <wd-input 
			  label="服务机构"
			  label-width="100px"
                v-model="addForm.institution" 
                placeholder="请输入服务机构"
                :rules="[{ required: true, message: '服务机构不能为空' }]"
                custom-class="form-input"
              />
            
				
              <wd-datetime-picker
                v-model="addForm.appointmentTime"
				 label-width="100px"
                type="datetime"
				label="预约时间"
                placeholder="请选择时间"
                :rules="[{ required: true, message: '请选择预约时间' }]"
                custom-class="form-picker"
              />
            
              <wd-input 
			  label="服务地点"
			  	 label-width="100px"
                v-model="addForm.address" 
                placeholder="请输入地点"
                :rules="[{ required: true, message: '服务地点不能为空' }]"
                custom-class="form-input"
              />
            
              <wd-input 
			  label="预约人"
			  	 label-width="100px"
                v-model="addForm.person" 
                placeholder="请输入预约人姓名"
                :rules="[{ required: true, message: '预约人不能为空' }]"
                custom-class="form-input"
              />
            
              <wd-input 
			  label="联系电话"
			  	 label-width="100px"
                v-model="addForm.phone" 
                placeholder="请输入联系电话"
                :rules="[
                  { required: true, message: '联系电话不能为空' },
                  { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
                ]"
                custom-class="form-input"
              />
          </wd-cell-group>
        </wd-form>
      </view>
      
      <!-- 底部按钮 -->
      <view class="popup-footer">
        <wd-button 
          type="default" 
          custom-class="footer-btn"
          @click="addVisible = false"
        >取消</wd-button>
        <wd-button 
          type="primary" 
          custom-class="footer-btn"
          @click="handleAddConfirm"
        >提交预约</wd-button>
      </view>
    </wd-action-sheet>
    
    <!-- 删除确认 -->
    <wd-action-sheet
      v-model="deleteVisible"
      title="取消预约"
      custom-class="delete-sheet"
    >
      <view class="delete-confirm">
        <view class="warning-icon">
          <wd-icon name="warning" size="60px" color="#f44336"></wd-icon>
        </view>
        <view class="delete-message">确定要取消预约【{{ currentItem.serviceName || '' }}】吗？</view>
        <view class="delete-tip">此操作将不可撤销</view>
      </view>
      
      <!-- 底部按钮 -->
      <view class="popup-footer">
        <wd-button 
          type="default" 
          custom-class="footer-btn"
          @click="deleteVisible = false"
        >取消</wd-button>
        <wd-button 
          type="danger" 
          custom-class="footer-btn"
          @click="handleDeleteConfirm"
        >确认取消</wd-button>
      </view>
    </wd-action-sheet>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

// 状态筛选选项
const filterTabs = ref([
  { label: "全部", value: "all" },
  { label: "待确认", value: "pending" },
  { label: "已确认", value: "confirmed" },
  { label: "已完成", value: "completed" },
  { label: "已取消", value: "canceled" }
]);

// 初始预约数据
const appointments = ref([
  {
    id: 'RES20230818001',
    status: 'pending',
    serviceName: '健康体检套餐',
    institution: '市中心医院',
    appointmentTime: '2023-08-20 09:00',
    address: '健康路18号门诊部3楼',
    person: '张先生',
    phone: '13800138000',
    image: '/static/vite.png'
  },
  {
    id: 'RES20230818002',
    status: 'confirmed',
    serviceName: '牙齿清洁护理',
    institution: '微笑牙科诊所',
    appointmentTime: '2023-08-21 14:30',
    address: '和平路56号2层',
    person: '李女士',
    phone: '13900139000',
    image: '/static/vite.png'
  },
  {
    id: 'RES20230818003',
    status: 'completed',
    serviceName: '高级SPA按摩',
    institution: '丽人美容会所',
    appointmentTime: '2023-08-15 16:00',
    address: '商业街88号4楼',
    person: '王女士',
    phone: '13700137000',
    image: '/static/vite.png'
  },
  {
    id: 'RES20230818004',
    status: 'canceled',
    serviceName: '心理咨询服务',
    institution: '阳光心理诊所',
    appointmentTime: '2023-08-18 10:30',
    address: '幸福路33号',
    person: '赵先生',
    phone: '13600136000',
     image: '/static/vite.png'
  },
  {
    id: 'RES20230818005',
    status: 'pending',
    serviceName: '家庭清洁服务',
    institution: '洁净家政公司',
    appointmentTime: '2023-08-22 13:00',
    address: '花园小区5栋302',
    person: '陈女士',
    phone: '13500135000',
       image: '/static/vite.png'
  },
]);

// 搜索和筛选
const searchText = ref('');
const activeFilter = ref('all');

// 弹窗控制
const detailVisible = ref(false);
const editVisible = ref(false);
const addVisible = ref(false);
const deleteVisible = ref(false);

// 表单引用
const editFormRef = ref(null);
const addFormRef = ref(null);

// 当前操作项
const currentItem = ref({
  id: '',
  status: '',
  serviceName: '',
  institution: '',
  appointmentTime: '',
  address: '',
  person: '',
  phone: '',
  image: ''
});

// 编辑表单
const editForm = reactive({
  id: '',
  status: '',
  serviceName: '',
  institution: '',
  appointmentTime: '',
  address: '',
  person: '',
  phone: ''
});

// 新增表单
const addForm = reactive({
  serviceName: '',
  institution: '',
  appointmentTime: '',
  address: '',
  person: '',
  phone: '',
  status: 'pending'
});

// 计算属性：过滤后的列表
const filteredAppointments = computed(() => {
  let list = appointments.value;
  
  // 搜索过滤
  if (searchText.value) {
    const keyword = searchText.value.toLowerCase();
    list = list.filter(item => item.serviceName.toLowerCase().includes(keyword));
  }
  
  // 状态过滤
  if (activeFilter.value !== 'all') {
    list = list.filter(item => item.status === activeFilter.value);
  }
  
  return list;
});

// 状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待确认',
    confirmed: '已确认',
    completed: '已完成',
    canceled: '已取消'
  };
  return statusMap[status] || '';
};

// 状态颜色
const getStatusColor = (status, opacity = 1) => {
  const colorMap = {
    pending: `rgba(249, 168, 37, ${opacity})`, // 橙色
    confirmed: `rgba(25, 118, 210, ${opacity})`, // 蓝色
    completed: `rgba(76, 175, 80, ${opacity})`, // 绿色
    canceled: `rgba(244, 67, 54, ${opacity})` // 红色
  };
  return colorMap[status] || '#999';
};

// 格式化日期时间
const formatDateTime = (datetime) => {
  if (!datetime) return '';
  const date = new Date(datetime);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 显示详情
const showDetail = (item) => {
  currentItem.value = { ...item };
  detailVisible.value = true;
};

// 显示编辑
const showEdit = (item) => {
  currentItem.value = { ...item };
  
  // 修复日期选择器问题：确保日期格式正确
  const appointmentTime = item.appointmentTime ? 
    new Date(item.appointmentTime).toISOString() : 
    new Date().toISOString();
  
  Object.assign(editForm, {
    ...item,
    appointmentTime
  });
  
  editVisible.value = true;
};

// 显示新增
const showAddForm = () => {
  // 重置表单并设置默认日期
  Object.assign(addForm, {
    serviceName: '',
    institution: '',
    appointmentTime: new Date().toISOString(), // 使用当前时间作为默认值
    address: '',
    person: '',
    phone: '',
    status: 'pending'
  });
  
  addVisible.value = true;
};

// 显示删除确认
const showDelete = (item) => {
  currentItem.value = { ...item };
  deleteVisible.value = true;
};

// 处理编辑确认
const handleEditConfirm = async () => {
  // 手动验证表单
  if (!editForm.serviceName) {
    uni.showToast({ title: '服务名称不能为空', icon: 'none' });
    return;
  }
  if (!editForm.institution) {
    uni.showToast({ title: '服务机构不能为空', icon: 'none' });
    return;
  }
  if (!editForm.appointmentTime) {
    uni.showToast({ title: '请选择预约时间', icon: 'none' });
    return;
  }
  if (!editForm.address) {
    uni.showToast({ title: '服务地点不能为空', icon: 'none' });
    return;
  }
  if (!editForm.person) {
    uni.showToast({ title: '预约人不能为空', icon: 'none' });
    return;
  }
  if (!editForm.phone) {
    uni.showToast({ title: '联系电话不能为空', icon: 'none' });
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(editForm.phone)) {
    uni.showToast({ title: '请输入有效的手机号码', icon: 'none' });
    return;
  }
  
  const index = appointments.value.findIndex(item => item.id === editForm.id);
  if (index !== -1) {
    appointments.value[index] = { ...editForm };
    uni.showToast({ title: '修改成功', icon: 'success' });
    editVisible.value = false;
  }
};

// 处理新增确认
const handleAddConfirm = async () => {
  // 手动验证表单
  if (!addForm.serviceName) {
    uni.showToast({ title: '服务名称不能为空', icon: 'none' });
    return;
  }
  if (!addForm.institution) {
    uni.showToast({ title: '服务机构不能为空', icon: 'none' });
    return;
  }
  if (!addForm.appointmentTime) {
    uni.showToast({ title: '请选择预约时间', icon: 'none' });
    return;
  }
  if (!addForm.address) {
    uni.showToast({ title: '服务地点不能为空', icon: 'none' });
    return;
  }
  if (!addForm.person) {
    uni.showToast({ title: '预约人不能为空', icon: 'none' });
    return;
  }
  if (!addForm.phone) {
    uni.showToast({ title: '联系电话不能为空', icon: 'none' });
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(addForm.phone)) {
    uni.showToast({ title: '请输入有效的手机号码', icon: 'none' });
    return;
  }
  
  // 生成新ID
  const newId = 'RES' + new Date().getFullYear() + 
                (new Date().getMonth() + 1).toString().padStart(2, '0') +
                new Date().getDate().toString().padStart(2, '0') + 
                (appointments.value.length + 1).toString().padStart(3, '0');
  
  const newAppointment = {
    ...addForm,
    id: newId,
    image: '/static/default-service.jpg'
  };
  
  appointments.value.unshift(newAppointment);
  uni.showToast({ title: '预约添加成功', icon: 'success' });
  addVisible.value = false;
};

// 处理删除确认
const handleDeleteConfirm = () => {
  const index = appointments.value.findIndex(item => item.id === currentItem.value.id);
  if (index !== -1) {
    appointments.value[index].status = 'canceled';
    uni.showToast({ title: '预约已取消', icon: 'success' });
    deleteVisible.value = false;
  }
};

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已通过计算属性实现
};

// 筛选处理
const filterAppointments = () => {
  // 筛选逻辑已通过计算属性实现
};
</script>

<style lang="less">
page {
  background-color: #f5f7fa;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.radio-view{
	width:100%;
	display: flex;
	.radio-view-label{
		flex:0 0 100px;
	}
	.radio-view-items{
		flex:1;
	}
}

.app-container {
  padding: 20rpx;
  min-height: 100vh;
  box-sizing: border-box;
  
  .header {
    // display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 20rpx 0;
    margin-bottom: 15rpx;
    
    .title {
      font-size: 38rpx;
      font-weight: bold;
      color: #2c3e50;
      text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.1);
    }
  }
  
  .search-section {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 15rpx 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  }
  
  .filter-section {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  }
  
  .appointment-list {
    display: flex;
    flex-direction: column;
    gap: 25rpx;
    
    .appointment-item {
      background: white;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
      transition: transform 0.3s, box-shadow 0.3s;
      
      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      }
    }
    
    .item-row {
      padding: 30rpx;
      display: flex;
      // border-bottom: 1rpx solid #f0f0f0;
    }
    
    .image-container {
      width: 180rpx;
      height: 180rpx;
      border-radius: 12rpx;
      overflow: hidden;
      margin-right: 25rpx;
      background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      
      .service-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .info-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .service-name {
      font-size: 34rpx;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 18rpx;
    }
    
    .info-row {
      display: flex;
      font-size: 28rpx;
      margin-bottom: 5rpx;
      align-items: center;
    }
    
    .info-label {
      color: #7f8c8d;
      width: 120rpx;
      font-weight: 500;
    }
    
    .info-value {
      color: #2c3e50;
      flex: 1;
      font-weight: 500;
    }
    
    .action-row {
      padding: 25rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fafbfc;
    }
    
    .status-badge {
      padding: 8rpx 25rpx;
      border-radius: 30rpx;
      font-size: 28rpx;
      font-weight: 500;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
    }
    
    .action-buttons {
      display: flex;
      gap: 20rpx;
    }
  }
  
  /* 详情弹窗样式 */
  .detail-sheet {
    .wd-action-sheet__content {
      padding: 0;
    }
    
    .detail-content {
      padding: 40rpx;
      
      .detail-item {
        display: flex;
        padding: 28rpx 0;
        // border-bottom: 1rpx solid #f0f0f0;
        
        //&:last-child {
        //  border-bottom: none;
        //}
        
        .detail-label {
          width: 180rpx;
          color: #7f8c8d;
          font-weight: 500;
          font-size: 30rpx;
        }
        
        .detail-value {
          flex: 1;
          color: #2c3e50;
          font-weight: 500;
          font-size: 30rpx;
        }
      }
    }
    
    .popup-footer {
      padding: 30rpx 40rpx;
    }
  }
  
  /* 表单弹窗样式 */
  .form-sheet {
    .wd-action-sheet__content {
      padding: 0;
      max-height: 80vh;
      overflow-y: auto;
    }
    
    .form-container {
      padding: 0 30rpx;
    }
    
    // .form-cell {
    //   padding: 28rpx 0 !important;
    //   margin: 0 20rpx;
    //   // border-bottom: 1rpx solid #f0f0f0;
      
    //   &:last-child {
    //     border-bottom: none;
    //   }
      
    //   .wd-cell__title {
    //     font-size: 30rpx;
    //     color: #555;
    //     width: 180rpx;
    //     font-weight: 500;
    //   }
      
    //   .form-input, .form-picker {
    //     font-size: 30rpx;
    //     // padding: 12rpx 0;
    //     border-radius: 8rpx;
    //   }
      
    //   .radio-group {
    //     padding: 15rpx 0;
        
    //     .radio-container {
    //       display: flex;
    //       gap: 40rpx;
          
    //       .radio-item {
    //         font-size: 28rpx;
    //         color: #555;
    //       }
    //     }
    //   }
    // }
  }
  
  /* 删除确认弹窗样式 */
  .delete-sheet {
    .wd-action-sheet__content {
      padding: 0;
    }
    
    .delete-confirm {
      padding: 50rpx 40rpx;
      text-align: center;
      
      .warning-icon {
        margin-bottom: 30rpx;
      }
      
      .delete-message {
        font-size: 34rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 15rpx;
      }
      
      .delete-tip {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
  
  .popup-footer {
    padding: 30rpx 40rpx;
    display: flex;
    gap: 25rpx;
    //border-top: 1rpx solid #eee;
    
    .footer-btn {
      flex: 1;
      height: 90rpx;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

/* 全局按钮样式优化 */
.wd-button {
  border-radius: 12rpx !important;
  font-weight: 500 !important;
  transition: all 0.2s;
  
  &:active {
    opacity: 0.85;
    transform: scale(0.98);
  }
}

/* 弹窗标题样式 */
.wd-action-sheet__header {
  font-size: 36rpx !important;
  font-weight: bold !important;
  color: #2c3e50 !important;
  padding: 30rpx !important;
  // border-bottom: 1rpx solid #eee !important;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* 输入框聚焦样式 */
.wd-input:focus {
  // border-color: #1976d2 !important;
  //box-shadow: 0 0 0 2rpx rgba(25, 118, 210, 0.2) !important;
}

/* 单选按钮样式 */
.wd-radio__label {
  font-size: 28rpx !important;
}

.wd-radio__input.is-checked .wd-radio__icon {
  background-color: #1976d2 !important;
  // border-color: #1976d2 !important;
}

/* 空状态样式 */
.wd-empty {
  margin-top: 100rpx !important;
  
  .wd-empty__description {
    font-size: 30rpx !important;
    color: #7f8c8d !important;
  }
}


</style>